<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/l_zoom.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/l_drag.js"></script>
</head>

<body>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
    <div class="drag-box"></div>
    <script>
        $(() => {
            const GRAPGAP = 10
            const GRAPGAPNum = 5
            const GRAPWIDTH = 1280
            const GRAPHEIGHT = 980
            $('.drag-box').css({
                width: GRAPWIDTH + 'px',
                height: GRAPHEIGHT + 'px',
                border: '1px solid gainsboro',
                position: 'relative',
                overflow: 'hidden'
            })
            const xLine = Math.floor(GRAPHEIGHT / GRAPGAP)
            const yLine = Math.floor(GRAPWIDTH / GRAPGAP)

            for (let i = 0; i < xLine; i++) {
                let xBoxHTML = `<div style="top:${GRAPGAP * i}px;width:${GRAPWIDTH}px;height:${1}px;opacity:${i % GRAPGAPNum ? 0.5 : 1};box-sizing: border-box;position: absolute;z-index: -1;background-color: rgb(216, 216, 216);" class="line line_x"></div>`
                let xmodal = $(xBoxHTML)
                $('.drag-box').append(xmodal)
            }
            for (let j = 0; j < yLine; j++) {
                let yBoxHTML = `<div style="left:${GRAPGAP * j}px;width:${1}px;height:${GRAPHEIGHT}px;opacity:${j % GRAPGAPNum ? 0.5 : 1};box-sizing: border-box;position: absolute;z-index: -1;background-color: rgb(216, 216, 216);" class="line line_x"></div>`
                let ymodal = $(yBoxHTML)
                $('.drag-box').append(ymodal)
            }
            $('.line').css({ 'box-sizing': 'border-box', 'position': 'absolute', 'z-index': -1, 'background-color': 'rgb(216, 216, 216)', 'opacity': ' 0.5', })
        })
        $(() => {
            const boxList = [
                { id: '111111', name: 'box1', className: 'skk', styles: { width: '100px', height: '100px', top: '40px', left: '80px', background: 'yellow' } },
                { id: '111112', name: 'box2', className: 'skk', styles: { width: '130px', height: '100px', top: '80px', left: '180px', background: 'yellowgreen' } }
            ]
            const boxListHistory = [...boxList]
            const listArr = JSON.parse(sessionStorage.getItem('boxListHistory')) || boxListHistory
            listArr.map((item, index) => {
                const modal = $(`<div id=${item.id} class="skk" style="position:'absolute',"></div>`)
                modal.css({ ...item.styles })
                $('.drag-box').append(modal)
            })

            $(document).ready(function () {
                $('.skk').l_zoom({
                    dragWidhtHeight: (id, x, y) => {
                        let newResult = boxListHistory.map(item => {
                            if (item.id === id) {
                                item.styles.width = x + 'px'
                                item.styles.height = y + 'px'
                            }
                            return item
                        })
                        sessionStorage.setItem('boxListHistory', JSON.stringify(newResult))
                    }
                }).l_drag({
                    dragMove: (id, x, y) => {
                        let newResult = boxListHistory.map(item => {
                            if (item.id === id) {
                                item.styles.left = x + 'px'
                                item.styles.top = y + 'px'
                            }
                            return item
                        })
                        sessionStorage.setItem('boxListHistory', JSON.stringify(newResult))
                    },
                })
            })
        })
    </script>
</body>

</html>